<div class="bjui-pageContent">
    <div class="bjui-doc">
        <h3 class="page-header">右键菜单</h3>
        <blockquote>
            <p>本节主要介绍框架的自定义右键菜单。</p>
        </blockquote>
        <h4>初始化</h4>
        <ul>
            <li>jQuery API：<code>右键菜单仅支持jQuery API初始化</code>
                <pre class="brush: js">
                    $(selector).contextmenu('show', options)
                </pre>
            </li>
        </ul>
        <span class="label label-default">示例：</span>　<button type="button" class="btn-blue" id="doc-contextmenu-example">请用鼠标右键点我</button> <code>请在控制台看点击菜单后的输出效果！</code><br>
        <script type="text/javascript">
            $('#doc-contextmenu-example').contextmenu('show', 
                {
                    items:[
                       {
                           icon  : 'plus',
                           title : '新增菜单',
                           func  : function(parent, menu) {
                               console.log(parent)
                               console.log('第一个菜单 -- 新增！')
                           }
                       },
                       {
                           icon  : 'apple',
                           title : '苹果菜单',
                           func  : function(parent, menu) {
                               console.log(menu)
                               console.log('第二个菜单 -- 苹果菜单！')
                           }
                       },
                       {
                           title : 'diver'
                       },
                       {
                           title : '无执行方法的菜单'
                       },
                       {
                           title : '其他菜单',
                           func  : function(parent, menu) {
                               console.log('其他菜单！')
                           }
                       }
                   ]
                }
            )
        </script>
        <p>示例代码：</p>
        <pre class="brush: js; html-script: true">
            &lt;button type="button" class="btn-blue" id="doc-contextmenu-example">请用鼠标右键点我&lt;/button>
            &lt;script type="text/javascript">
                $('#doc-contextmenu-example').contextmenu('show', 
                    {
                        items:[
                           {
                               icon  : 'plus',
                               title : '新增菜单',
                               func  : function(parent, menu) {
                                   console.log(parent)
                                   console.log('第一个菜单 -- 新增！')
                               }
                           },
                           {
                               icon  : 'apple',
                               title : '苹果菜单',
                               func  : function(parent, menu) {
                                   console.log(menu)
                                   console.log('第二个菜单 -- 苹果菜单！')
                               }
                           },
                           {
                               title : 'diver'
                           },
                           {
                               title : '无执行方法的菜单'
                           },
                           {
                               title : '其他菜单',
                               func  : function(parent, menu) {
                                   console.log('其他菜单！')
                               }
                           }
                       ]
                    }
                )
            &lt;/script>
        </pre>
        <h4>参数（options）</h4>
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>默认值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>items</td>
                    <td>array[object(title, func)]</td>
                    <td>null</td>
                    <td>[必选] 右键菜单名称及对应方法的数组，object的参数见下面两行。</td>
                </tr>
                <tr>
                    <td>└ items - icon</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[可选] 右键菜单的图标(<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome</a>)，<code>用法同button的图标</code>。</td>
                </tr>
                <tr>
                    <td>└ items - title</td>
                    <td>string</td>
                    <td>null</td>
                    <td>[必选] 右键菜单的名称，<code>当title="diver"时，将生成一条分隔线</code>。</td>
                </tr>
                <tr>
                    <td>└ items - func</td>
                    <td>function(parent, menu)</td>
                    <td>null</td>
                    <td>[可选] 点击右键菜单时执行的方法，parent = 弹出右键菜单的jQuery对象，menu = 被点击菜单的jQuery对象。</td>
                </tr>
                <tr>
                    <td>exclude</td>
                    <td>selector</td>
                    <td>null</td>
                    <td>[可选] 不触发右键菜单的子元素的jQuery选择器。</td>
                </tr>
                <tr>
                    <td>shadow</td>
                    <td>boolean</td>
                    <td>true</td>
                    <td>[可选] 是否显示右键菜单的阴影效果。</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>